<template>
	<view class="my-performance">
        <view class="tabs-view">
            <u-tabs :list="list" :current="current" :is-scroll="false" active-color="#ff5000" bar-width="200" @change="change"></u-tabs>
            <view class="settlement-total-container">
                <view>本期佣金:<text class="color-red">{{ settlementTotal.final_money | unitPrice('￥') }}</text></view>
                <view>订单佣金:<text class="color-red">{{ settlementTotal.push_money | unitPrice('￥') }}</text></view>
                <view>退单佣金返还:<text class="color-red">{{ settlementTotal.return_push_money | unitPrice('￥') }}</text></view>
            </view>
        </view>
        <mescroll-body ref="mescrollRef" top="170" auto="false" :down="down"  @init="mescrollInit" @down="downCallback" @up="upCallback">
            <u-collapse v-if="performanceList && performanceList.length" hover-class="none">
                <u-collapse-item :title="`${sn_text}：${item.sn}`" v-for="(item, index) in performanceList" :key="index">
                    <view class="performance-info u-p-l-35 u-flex u-flex-wrap">
                        <view class="u-m-t-20" v-if="item.order_price">订单金额：
                            <text class="color-red">{{ item.order_price | unitPrice('￥') }}</text>
                        </view>
                        <view class="u-m-t-20" v-if="item.member_name">会员名称：<text>{{ item.member_name }}</text></view>
                        <view class="u-m-t-20" v-if="item.create_time">下单时间：
                            <text>{{ item.create_time | date('yyyy-mm-dd hh:MM') }}</text>
                        </view>
                        <view class="u-m-t-20" v-if="item.price" >返利金额：
                            <text class="color-red">{{ item.price | unitPrice('￥') }}</text>
                        </view>
                        <view class="u-m-t-20" v-if="item.end_time">结算时间：
                            <text>{{ item.end_time | date('yyyy-mm-dd hh:MM') }}</text>
                        </view>
                        <view class="u-m-t-20" v-if="item.final_money">结算金额：
                            <text class="color-red">{{ item.final_money | unitPrice('￥') }}</text>
                        </view>
                    </view>
                </u-collapse-item>
            </u-collapse>
        </mescroll-body>
	</view>
</template>

<script>
    import * as API_Distribution from '@/api/distribution.js'
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
        mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
                list: [{
                    name: '我的订单'
                }, {
                    name: '我的退货单'
                }, {
                    name: '我的业绩'
                }],
                current: 0,
                member_id: 0,
                params: {
                    page_no: 1,
                    page_size: 10
                },
                /** 我的结算单 */
                settlementTotal: {
                  push_money: 0,
                  final_money: 0,
                  return_order_money: 0
                },
                /** 业绩列表 */
                performanceList: [],
                /** 结算单id */
                billId: '',
                /** 当前折叠面板名称 */
                activeNames: [],
                /** 当前面板对应的文本名称 */
                sn_text: '订单编号',
                down: {
                    auto: false
                }
			};
		},
        onLoad(options) {
            this.member_id = options.member_id || 0
        },
        methods: {
            /** 上拉加载数据 */
            upCallback (){
                this.getSettlementTotal();
            },
            /** 下拉刷新 */
            downCallback(){
                this.change(this.current);
            },
            /** 标签发生变化时 */
            change(index) {
                this.current = index;
                switch (index) {
                    case 0: this.getRelevantList()
                        break
                    case 1: this.getRelevantRefundList()
                        break
                    case 2: this.getMyHistoryList()
                        break
                }
            },
            /** 获取与我相关的结算单信息 */
            getSettlementTotal() {
                API_Distribution.getSettlementTotal({member_id: this.member_id}).then(response => {
                    this.settlementTotal = response
                    this.billId = response.total_id
                    this.params = {
                        ...this.params,
                        member_id: response.member_id,
                        bill_id: response.id
                    }
                    switch (this.current) {
                        case 0: this.getRelevantList()
                            break
                        case 1: this.getRelevantRefundList()
                            break
                        case 2: this.getMyHistoryList()
                            break
                    }
                })
            },
            /** 获取与我相关的订单记录 */
            getRelevantList() {
                API_Distribution.getRelevantList(this.params).then(response => {
                    this.performanceList = response.data
                    this.mescroll.endBySize(response.data.length, response.data_total)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            },
            /** 获取我的历史业绩记录 */
            getMyHistoryList() {
                API_Distribution.getMyHistoryList(this.params).then(response => {
                    this.sn_text = '结算单编号'
                    this.performanceList = response.data
                    this.mescroll.endBySize(response.data.length, response.data_total)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            },
            /** 获取与我相关的退款单记录 */
            getRelevantRefundList() {
                API_Distribution.getRelevantRefundList(this.params).then(response => {
                    this.performanceList = response.data
                    this.mescroll.endBySize(response.data.length, response.data_total)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            },
            /** 查看详情 */
            handleDetails(item) {
                this.current = 0
                this.params = {
                    ...this.params,
                    member_id: item.member_id,
                    bill_id: item.id
                }
                this.getRelevantList()
            }
        }
	}
</script>

<style lang="scss" scoped>
    .my-performance {
        .settlement-total-container {
            padding: 15px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
            font-size: 26rpx;
        }
        .performance-info {
            width: 100%;
            font-size: 25rpx;
            view {
                width: 47%;
            }
        }
        .color-red {
            color: $u-type-error;
        }
        /deep/.u-collapse-head {
            padding: 30rpx;
        }
        /deep/.u-empty {
            margin-top: 0rpx !important;
        }
    }
</style>
